<template>
  <div>
    <router-link v-if="!item.children" :to="resolvePath()" tag="span">
      <el-menu-item :index="resolvePath()">
        <i :class="item.meta.icon"></i>
        <span>{{ item.meta.title }}</span>
      </el-menu-item>
    </router-link>

    <el-submenu v-else :index="resolvePath()">
      <template slot="title">
        <i :class="item.meta.icon"></i>
        <span>{{ item.meta.title }}</span>
      </template>
      <menu-item
          v-for="(child, index) in item.children"
          :key="index"
          :item="child"
          :fatherPath="item.path"
      />
    </el-submenu>
  </div>
</template>

<script>
export default {
  name: "MenuItem",
  props: {
    item: {
      type: Object,
      required: true,
    },
    fatherPath: {
      type: String,
      default: "",
    },
  },
  methods: {
    resolvePath() {
      return this.fatherPath ? `${this.fatherPath}/${this.item.path}` : this.item.path;
    },
  },
};
</script>
